import React from 'react';
import { default as SwiperCore } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectCoverflow2 } from './effect-coverflow';

import 'swiper/css';
import 'swiper/css/effect-coverflow'
import './App.css'

SwiperCore.use([EffectCoverflow2])

console.log('Swiper', Swiper)

export default () => {
    return (
        <Swiper 
            // modules={[EffectCoverflow2]} 
            effect="coverflow2"
            grabCursor={true}
            centeredSlides={true}
            slidesPerView="auto"
            initialSlide={0}
            coverflowEffect={{
                rotate: 0,
                stretch: document.body.clientWidth*30/100,
                depth: 300,
                modifier: 1,
                slideShadows : false
            }}
        >
            {[1, 2, 3].map((item, index) => {
                return <SwiperSlide key={`swiper-side-${index}`}>Slide {index}</SwiperSlide>;
            })}
        </Swiper>
    );
};
    